<template>
  <div class="container">
    <Card class="card">
      <p slot="title">
        登陆
      </p>
      <Row :gutter="8">
        <i-col span="24">
          <Form
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            :label-width="80"
          >
            <FormItem prop="username" label="用户名">
              <i-input
                type="text"
                v-model="formInline.username"
                placeholder="Username"
              >
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </i-input>
            </FormItem>
            <FormItem prop="password" label="密码">
              <i-input
                type="password"
                password
                v-model="formInline.password"
                placeholder="Password"
              >
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </i-input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="login('formInline')">登陆</Button>
              <Button type="success" @click="register">注册</Button>
              <Button type="warning" @click="forgetPwd">忘记密码</Button>
            </FormItem>
          </Form>
        </i-col>
      </Row>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        username: '',
        password: ''
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: 'Please fill in the user name',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login(name) {
      const formData = {
        username: this.formInline.username,
        password: this.formInline.password
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http
            .post('http://localhost:3000/user/login', formData, {
              emulateJSON: true
            })
            .then(({ body }) => {
              const { data, status, message } = body
              if (status === 200) {
                this.$Message.success({
                  content: message,
                  duration: 2,
                  closable: true
                })
                localStorage.setItem('username', data.user.username)
                localStorage.setItem('token', data.token)
                localStorage.setItem('_id', data.user._id)
                localStorage.setItem('userAdmin', data.user.userAdmin)
                // 登陆成功后跳转至主页
                this.$router.push({ path: '/home' })
              }
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    register() {
      this.$router.push({ path: '/register' })
    },
    forgetPwd() {
      this.$router.push({ path: '/forgetPwd' })
    }
  }
}
</script>

<style lang="css" scoped>
.container {
  padding: 0 8px;
  padding-top: 8px;
}
.card {
  width: 500px;
  margin: 0 auto;
  margin-top: 10%;
}
</style>
